<template>
  <div class="p-2">
    <div class="mb-2" style="text-align: center; font-weight: bold">
      <text class="mr-4"
        >当前车辆数：<text class="text-size-24px color-#f59a23">{{ carrental.carCount ? carrental.carCount : 0 }}辆</text>
      </text>
      <text class="mr-4"
        >当前已租车辆：<text class="text-size-24px color-#f59a23">{{ carrental.rentedCount ? carrental.rentedCount : 0 }}辆</text>
      </text>
      <text class="mr-4"
        >当前出租率：<text class="text-size-24px color-#f59a23">{{ carrental.rentRate ? carrental.rentRate : 0 }}%</text>
      </text>
    </div>
    <el-row class="mt-10">
      <el-col :span="12" class="card-box">
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <div style="text-align: center; font-weight: bold; font-size: 18px">车辆品牌分布</div>
          <div ref="commandstats" style="height: 220px" />
        </div>
      </el-col>
      <el-col :span="12" class="card-box">
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <div style="text-align: center; font-weight: bold; font-size: 18px">注册年份分布</div>
          <div ref="commandstats2" style="height: 220px" />
        </div>
      </el-col>
      <el-col :span="24" class="card-box">
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <div style="text-align: center; font-weight: bold; font-size: 18px">出租率变化</div>
          <el-row class="mt-6">
            <el-col :span="21" :push="3">
              <div class="flex">
                <el-form-item label="年度" prop="year">
                  <el-date-picker v-model="year" clearable type="year" value-format="YYYY" placeholder="请选择年度" @change="handleYearChange" />
                </el-form-item>
                <el-form-item class="ml-8" label="月份" prop="month">
                  <el-date-picker v-model="month" clearable type="month" value-format="MM" placeholder="请选择月份" @change="handleMonthChange" />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <div ref="axisstats" style="width: 100%; height: 400px" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Cache" lang="ts">
import { getCache } from '@/api/monitor/cache';
import { getCarRental, getCarRegistrationYear, getCarBrandDistribution, getCarLineBarChart } from '@/api/zichanguanli/carbasicInformation/index';
import * as echarts from 'echarts';
import { CacheVO } from '@/api/monitor/cache/types';
import { Right } from '@element-plus/icons-vue';
import { s } from 'node_modules/vite/dist/node/types.d-aGj9QkWt';

const cache = ref<Partial<CacheVO>>({});
const commandstats = ref();
const commandstats2 = ref();
const axisstats = ref();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const date = new Date();
const year = ref(date.getFullYear().toString());
const month = ref((date.getMonth() + 1).toString().padStart(2, '0'));
const handleMonthChange = (e) => {
  console.log('🚀 ~ handleChange ~ e:', e);
  month.value = e;
  getList();
};
const handleYearChange = (e) => {
  console.log('🚀 ~ handleChange ~ e:', e);
  year.value = e;
  getList();
};

const getList = async () => {
  try {
    proxy?.$modal.loading('正在加载数据，请稍候！');
    const res = await getCarBrandDistribution();
    const res2 = await getCarRegistrationYear();
    console.log('🚀 ~ getList ~ res2:', res2);
    const res3: any = await getCarLineBarChart({
      year: year.value,
      month: month.value
    });
    //   console.log('🚀 ~ getList ~ res3:', res3);
    console.log('🚀 ~ getCarBrandDistribution ~ res:', res);
    proxy?.$modal.closeLoading();
    const commandstatsIntance = echarts.init(commandstats.value, 'macarons');
    const commandstatsIntance2 = echarts.init(commandstats2.value, 'macarons');
    const axisstatsIntance = echarts.init(axisstats.value, 'macarons');
    commandstatsIntance.setOption({
      tooltip: {
        trigger: 'item'
      },
      toolbox: {
        show: false
      },
      legend: {
        orient: 'vertical',
        top: 30,
        right: 90
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '80%'],
          center: ['34%', '50%'],
          data: res.data
        }
      ]
    });
    commandstatsIntance2.setOption({
      tooltip: {
        trigger: 'item'
      },
      toolbox: {
        show: false
      },
      legend: {
        orient: 'vertical',
        top: 30,
        right: 90
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '80%'],
          center: ['34%', '50%'],
          data: res2.data
        }
      ]
    });
    axisstatsIntance.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        show: false,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ['Evaporation', 'Precipitation', 'Temperature']
      },
      xAxis: [
        {
          type: 'category',
          data: res3.data.xaxis,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '数量',
          // interval: 50,
          axisLabel: {
            formatter: '{value} 辆'
          }
        },
        {
          type: 'value',
          name: '出租率',
          // interval: 5,
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: [
        {
          name: '数量',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 辆';
            }
          },
          data: res3.data.yaxis[0].columnarAxis
        },
        {
          name: '出租率',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          },
          data: res3.data.yaxis[0].brokenLineAxis
        }
      ]
    });
    window.addEventListener('resize', () => {
      commandstatsIntance.resize();
      commandstatsIntance2.resize();
    });
  } catch (error) {
    proxy?.$modal.closeLoading();
  }
};
const carrental = ref<any>({
  carCount: undefined,
  rentedCount: undefined,
  rentRate: undefined
});
onMounted(async () => {
  const res = await getCarRental();
  carrental.value = { ...res.data };
  getList();
});
</script>
